<template>
  <CSidebar fixed :minimize="minimize" :show.sync="show" class="all my_sidebar">
    <!-- <CSidebarBrand
      :imgFull="{ width: 50, height: 30, alt: 'Logo', src: 'img/white.png'}"
      :imgMinimized="{ width: 115, height: 30, alt: 'Logo', src: 'img/white.png'}"
      :wrappedInLink="{ href: 'https://cloud.piesat.cn/', target: '_blank'}"
    />-->
    <!-- <CRenderFunction  :contentToRender="test(nav)" />  -->
    <CInput
      placeholder="搜索生产线..."
      v-if="mag == 'nosearchinput' ? false : true"
      v-model="input"
      style="
        width: 174px;
        margin-left: 12px;
        margin-top: 10px;
        margin-bottom: 0px;
      "
      maxlength="50"
      @keyup.enter="enterfaction"
    />
    <!-- 搜索 -->
    <img
      class="iconstylesearch"
      src="../../src/assets/icons/qcsearch.png"
      v-if="mag == 'nosearchinput' ? false : imgshow"
      alt
    />
    <!-- 清除 -->
    <img
      class="iconstyleoff"
      src="../../src/assets/icons/qcclear.png"
      v-if="mag == 'nosearchinput' ? false : imgoff"
      @click="clearmess"
      alt
    />
    <CRenderFunction flat :content-to-render="nav" />
    <!-- <CSidebarMinimizer class="d-md-down-none" @click.native="showfunction" /> -->

    <!-- <CRenderFunction :contentToRender="renderFunction"  :content-to-render="nav" class="d-flex justify-content-between">
    <template #named-slot>
      Element rendered by<CBadge class="ml-2" color="success">NAMED SLOT</CBadge>
    </template>
    </CRenderFunction>-->
  </CSidebar>
</template>
<script>
export default {
  name: "TheSidebar",
  props: ["mag"],
  data() {
    return {
      tempnav: [],
      imgshow: true,
      imgoff: false,
      titleshow: [],
      opeanshow: [],
      input: "",
      minimize: false,
      nav: [
        {
          _name: "CSidebarNav",
          _children: [],
          // _slots:this.test()
        },
      ],
      show: false,
      counter: 0,
    };
  },
  created() {},
  watch: {
    input(newval) {
      if (newval == "") {
        this.input = "";
        this.imgshow = true;
        this.imgoff = false;
        this.enterfaction();
      } else {
        this.imgshow = false;
        this.imgoff = true;
      }
      let han = /^[\u4e00-\u9fa5]+$/;
      if (han.test(newval)) {
        this.enterfaction();
      }
    },
  },
  computed: {
    renderFunction() {
      return [
        "CAlert",
        // { props: { color: 'success' } },
        [
          [
            "CButton",
            {
              props: { color: this.counter > 0 ? "success" : "warning" },
              on: {
                click: (e) => {
                  this.counter++;
                },
              },
            },
            [`Button was clicked ${this.counter} times`],
          ],
          // [
          //   'CIput',
          //   { props: { color: 'warning' }},
          //   [{ slot: 'named-slot' }]
          // ],
          [
            "li",
            {
              props: { color: "success" },
              name: "xx",
              on: {
                click: (res) => {
                  alert(name);
                },
              },
            },
            [`dd`],
          ],
          [
            "li",
            {
              props: { color: "success", name: "xx1" },
              name: "xxx",
              on: {
                click: (res) => {
                  alert(name);
                },
              },
            },
            [`dd`],
          ],
          [
            "li",
            {
              props: { color: "success" },
              name: "xyz",
              on: {
                click: (res) => {
                  alert(name);
                },
              },
            },
            [`ddd`],
          ],
        ],
      ];
    },

    test1(nav) {
      alert("这是侧栏弹框");
      return [
        "CAlert",
        { props: { variant: "success" } },
        [
          [
            "CButton",
            {
              props: { variant: this.counter > 0 ? "success" : "warning" },
              on: { click: (e) => this.counter++ },
            },
            [`Button was clicked ${this.counter} times`],
          ],
          [
            "CButton",
            { props: { variant: "warning" } },
            [{ slot: "named-slot" }],
          ],
        ],
      ];
    },
  },
  methods: {
    // displayaction(){
    //   if(this.nav[0]._children!=[]){

    //   }else{

    //   }
    // },
    clearmess() {
      this.input = "";
      this.imgoff = !this.imgoff;
      this.imgshow = !this.imgshow;
    },
    enterfaction() {
      let pathstr = window.location.hash; //获取当前路由
      let patharr = pathstr.split("/");
      let searchdata = patharr[patharr.length - 1];
      let self = this;
      let data = this.nav[0]._children;
      if (
        searchdata == "qualityCheck" ||
        searchdata == "qualityCheck?from=qualityCheckCommon"
      ) {
        self.qcsearch(data);
      } else if (
        searchdata == "processing" ||
        searchdata == "processing?from=processingCommon"
      ) {
        if (self.input != "") {
          self.opeanshow = [];
          self.titleshow = [];
          for (let i = 0; i < data.length; i++) {
            if (data[i].title.indexOf(self.input) != -1) {

              // 这行的颜色变红
              self.titleshow.push(i);
            }
            for (let j = 0; j < data[i].children.length; j++)
              if (data[i].children[j].title.indexOf(self.input) != -1) {
                self.opeanshow.push(i);
              }
          }
          self.$parent.opeanMethod(self.opeanshow, self.titleshow);
        } else {
          self.$parent.getTreeListByGroupId();
        }
        let list = $(".c-sidebar-nav-dropdown-items a");
        let temparr = [];
        for (let i = 0; i < list.length; i++) {
          let temp = list[i].innerText;
          temparr.push(temp);
        }
        if (self.input == "") {
          $(".c-sidebar-nav-link").removeClass("xyzz");
        }
        for (let j = 0; j < temparr.length; j++) {
          if (self.input != "" && temparr[j].indexOf(self.input) != -1) {
            $(".c-sidebar-nav-dropdown-items .c-sidebar-nav-link")
              .eq(j)
              .addClass("xyzz");
          }
        }
      }
    },
    qcsearch(data) {
      let self = this;
      if (self.input != "") {
        self.opeanshow = [];
        self.titleshow = [];
        for (let i = 0; i < data.length; i++) {
          if (data[i].title.indexOf(self.input) != -1) {
            // 这行的颜色变红
            self.titleshow.push(i);
          }
          for (let j = 0; j < data[i].children.length; j++)
            if (data[i].children[j].title.indexOf(self.input) != -1) {
              // self.opeanshow.push(i);
              self.tempnav.push(i);
            }
        }
        self.$parent.opeanMethod1(self.opeanshow, self.titleshow);
      } else {
        self.$parent.getTreeListByGroupId2();
      }
      // let boxCollection= document.getElementsByClassName("my_sidebar");
      let list = $(".c-sidebar-nav-dropdown-items a");
      let temparr = [];
      for (let i = 0; i < list.length; i++) {
        let temp = list[i].innerText;
        // if(temp == self.input){
        //   temparr.push(i)
        // //  $(".c-sidebar-nav-dropdown-items .c-sidebar-nav-link").eq(0).addClass("selectcolor").css("color", "red")
        // }
        temparr.push(temp);
      }
      if (self.input == "") {
        $(".c-sidebar-nav-link").removeClass("xyzz");
      }
      for (let j = 0; j < temparr.length; j++) {
        if (self.input != "" && temparr[j].indexOf(self.input) != -1) {
          $(".c-sidebar-nav-dropdown-items .c-sidebar-nav-link")
            .eq(j)
            .addClass("xyzz");
        }
      }
    },
    showfunction() {
      if (this.minimize == false) {
        this.$emit("toParent", "60px");
      } else {
        this.$emit("toParent", "200px");
      }
      this.minimize = !this.minimize;
    },

    test() {
      alert("这是弹框测试");
    },
  },
  mounted() {
    this.$root.$on("toggle-sidebar", () => {
      const sidebarOpened = this.show === true || this.show === "responsive";

      this.show = sidebarOpened ? false : "responsive";
    });
    this.$root.$on("toggle-sidebar-mobile", () => {
      const sidebarClosed = this.show === "responsive" || this.show === false;

      this.show = sidebarClosed ? true : "responsive";
    });
    // this.displayaction()
  },
};

// $(".my_sidebar .c-sidebar-nav-link").click(function(){

// $(this).children("a").addClass("class1").parent().siblings().find("a").removeClass("class1");
// alert("hello world")
// });
</script>
<style>
.all {
  margin-top: 60px;
  background-color: #484848;
  width: 200px;
}
.my_sidebar .c-sidebar-nav-link {
  /* color:aqua; */
  white-space: pre-line;
  height: 100%;
}

.c-sidebar .c-sidebar-nav-link:hover,
.c-sidebar .c-sidebar-nav-dropdown-toggle:hover {
  background: #071041;
}
.iconstylesearch {
  margin-top: 18px;
  position: absolute;
  right: 24px;
  width: 20px;
  height: 20px;
}
.iconstyleoff {
  position: absolute;
  margin-top: 18px;
  margin-left: 156px;
  width: 20px;
  height: 20px;
}
</style>